<template>
  <div>
    <h1>流水号生成器</h1>
<!--    <SerialNumber />-->
    <div id="blocklyDiv" style="height: 480px; width: 600px;"></div>
  </div>
</template>

<script lang="ts" setup>
import * as Blockly from 'blockly';

defineOptions({name: 'SerialNumberBlockly'});

onMounted(() => {
  // 创建 Blockly 工作区
  const workspace = Blockly.inject('blocklyDiv', {
    toolbox: {
      kind: 'categoryToolbox',
      contents: [
        {
          kind: 'category',
          name: '生成流水号',
          contents: [
            {
              kind: 'block',
              type: 'generate_serial_number'
            }
          ]
        }
      ]
    }
  });

  // 定义生成流水号的 Blockly 块
  Blockly.Blocks['generate_serial_number'] = {
    init: function () {
      this.appendDummyInput()
        .appendField('生成流水号');
      this.setPreviousStatement(true, null);
      this.setNextStatement(true, null);
      this.setColour(230);
      this.setTooltip('点击生成流水号');
      this.setHelpUrl('');
    }
  };

  // // 定义生成流水号块的 JavaScript 代码生成器
  // Blockly.JavaScript['generate_serial_number'] = function (block) {
  //   return 'generateSerialNumber();\n';
  // };


});
</script>

<style scoped>
h1 {
  text-align: center;
}
</style>
